import React, { Component } from 'react';
import { IProConditions } from 'legions-pro-design/es/LegionsProConditions/ProConditionsUtils';
import { LegionsProConditions } from 'legions-pro-design';
import { fullProvider, lazyInject } from 'legions-control-container';
import { LETTER } from '../table-config/table';
import { randomNum } from '../../utils/utils';
import has from 'lodash/has';
type IQuery = Array<IProConditions['componentModel']>;
interface IComponentType {
  [index: string]: { title: string; type: string };
}
type TypeOnQueryPropertyClick = (value: { uid: string;name:string})=>void
/** 生成搜索条件组件模板工具类 */
@fullProvider(QueryTemplateConfig)
export class QueryTemplateConfig {
  componentType: IComponentType = {
    text: {
      title: '设置文本框属性',
      type: 'text',
    },
    select: {
      title: '设置下拉属性',
      type: 'select',
    },
    textArea: {
      title: '设置多行文本框属性',
      type: 'textArea',
    },
    date: {
      title: '设置日期属性',
      type: 'date',
    },
    daterange: {
      title: '设置日期区间属性',
      type: 'daterange',
    },
    checkBox: {
      title: '设置复选框属性',
      type: 'checkBox',
    },
    radioButton: {
      title: '设置单选组合属性',
      type: 'radioButton',
    },
  };
  formUtils: InstanceType<typeof LegionsProConditions['ProConditions']> = null;
  constructor() {
    this.formUtils= new LegionsProConditions.ProConditions()
  }
  getQueryComponent(item:IProConditions['componentModel']) {
    if (item instanceof LegionsProConditions.ConditionTextModel) {
      return {
        title: '文本控件属性设置',
        type: 'text',
       }
    }
    else if (item instanceof LegionsProConditions.ConditionTextAreaModel) {
      return {
        title: '多行文本控件属性设置',
        type: 'textArea',
       }
    }
    else if (item instanceof LegionsProConditions.ConditionSelectModel) {
      return {
        title: '下拉控件属性设置',
        type: 'select',
       }
    }
    else if (item instanceof LegionsProConditions.ConditionDateModel) {
      return {
         title: '日期控件属性设置',
         type: 'date',
       }
    }
    else if (item instanceof LegionsProConditions.ConditionRangePickerModel) {
      return {
        title: '日期范围控件属性设置',
        type: 'daterange',
       }
    }
    else if (item instanceof LegionsProConditions.ConditionCheckBoxModel) {
      return {
        title: '复选控件属性设置',
        type: 'checkBox',
       }
    }
    else if (item instanceof LegionsProConditions.ConditionRadioButtonModel) {
      return {
        title: '单选组合控件属性设置',
        type: 'radioButton',
       }
    }
  }
  /** 随机生成组件id */
  private randomComponentId(type: string) {
    let name =`${type}A`
    const index = randomNum(0,LETTER.length - 1);
    if (index <= LETTER.length - 1) {
      name = `${type}${LETTER[index]}`
    }
    return name;
  }
  private createComponentName(type: string) {
    let name = this.randomComponentId(type);
    if (has(this.formUtils,name)) {
      name=this.randomComponentId(type);
    }
    return name;
  }
  /**  搜索条件组件配置----生成文本框组件*/
  createText(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('text');
    this.formUtils.renderTextConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '文本框',
        labelSpan: 5,
        defaultValue: '',
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /*** 搜索条件组件配置----生成多行文本框组件*/
  createTextArea(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('textArea');
    this.formUtils.renderTextAreaConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '多行文本',
        labelSpan: 5,
        defaultValue: '',
        maxlength: 50,
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /** * 搜索条件组件配置----生成下拉框组件*/
  createSelect(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('select');
    this.formUtils.renderSelectConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '下拉选择',
        labelSpan: 5,
        options: [],
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /** * 搜索条件组件配置----生成日期组件 */
  createDate(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('date');
    this.formUtils.renderDateConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '日期选择',
        labelSpan: 5,
        format: 'YYYY-MM-DD',
        showTime: true,
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /** * 搜索条件组件配置----生成日期范围组件 */
  createDaterange(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('daterange');
    this.formUtils.renderRangePickerConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '日期范围',
        labelSpan: 5,
        placeholder: ['开始日期', '结束日期'],
        onChange: (originValue, value, viewStore) => {
          console.log(originValue, value, viewStore, '日期范围');
        },
        format: 'YYYY-MM-DD',
        /*showTime:true, */
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }
  /*** 搜索条件组件配置----生成复选框组件*/
  createCheckBox(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('checkBox');
    this.formUtils.renderCheckBoxConfig({
      containerProps: {
        col: {
          md: 2,
          lg: 2,
          xl: 1,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '删除',
        labelSpan: 5,
        defaultChecked: true,
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /*** 搜索条件组件配置----生成数字文本框组件 */
  createNumberInput(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('numberText');
    this.formUtils.renderTextNumberConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '数量',
        labelSpan: 5,
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /** 搜索条件组件配置----生成RadioButton组件*/
  createRadioButton(onQueryPropertyClick:TypeOnQueryPropertyClick): IQuery {
    const name = this.createComponentName('radioButton');
    this.formUtils.renderRadioButtonConfig({
      containerProps: {
        col: {
          md: 6,
          lg: 4,
          xl: 4,
        },
        name: name,
        onClick:onQueryPropertyClick
      },
      conditionsProps: {
        label: '单选组合',
        labelSpan: 5,
        onChange: (event, value, viewStore) => {
          console.log(event, value, viewStore, '城市');
        },
        options: [
          { label: '上海', value: 'sh' },
          { label: '广州', value: 'gz' },
        ],
      },
      jsonProperty: name,
    });
    return [this.formUtils.getConditionsConfig(name)];
  }

  /*** 搜索条件组件配置----生成搜索按钮组件**/
  createSearchButton(): IQuery {
    this.formUtils.renderSearchConfig({
      containerProps: {
        name: 'search',
        col: {
          md: 6,
          lg: 5,
          xl: 4,
        },
      },
      conditionsProps: {
        onSearch: (value, view) => {
          console.log(value);
        },
      },
    });
    return [this.formUtils.getConditionsConfig('search')];
  }
}
